<template>
  <div class="pagebox app-container">
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box bg">
          <div class="topoptions">
            <span class="colorin">运行时间排行</span>
            <a-select
              :default-value="'1-10'"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              style="width: 120px"
              @change="handleChange"
            >
              <a-select-option
                :value="item.name"
                v-for="(item, index) in runnumList"
                :key="index"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </div>
          <barChartSort :chart-data="chartDataBarsort" :height="'400px'" :str="str"/>
          <div class="btnbox">
            <ExportFile
              :fetch="getDownloadData"
              :fields="jsonnumFields"
              name="机床运行时间.xls"
            >
              <a-button type="primary" :loading="iconLoading"> 导出 </a-button>
            </ExportFile>
          </div>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box bg">
          <div class="topoptions ">
            <span class="colorin">产量排行</span>
            <a-select
              :default-value="'1-10'"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              style="width: 120px"
              @change="handleNumChange"
            >
              <a-select-option
                :value="item.name"
                v-for="(item, index) in runproList"
                :key="index"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </div>
          <barChartSort
            :chart-data="chartDataBarsort2"
            :className="'chartDataBarsort2'"
            :height="'400px'"
          />
          <div class="btnbox">
            <ExportFile
              :fetch="getDownloadDataproduct"
              :fields="jsonFieldsproduct"
              name="机床产量.xls"
            >
              <a-button type="primary" :loading="iconLoading"> 导出 </a-button>
            </ExportFile>
          </div>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="24" style="margin-top: 20px">
        <a-card
          :tab-list="tabListNoTitle"
          :active-tab-key="noTitleKey"
          @tabChange="(key) => onTabChange(key, 'noTitleKey')"
        >
          <linechart
            :str="chartstr"
            :chart-data="chartData"
            :height="'374px'"
          ></linechart>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import barChartSort from "@/pages/echartsCom/barChartSort";
import linechart from "@/pages/echartsCom/linechart.vue";

import api from "@/api/statisticalForm.js";
import {
  timeCalculation,
  formatCurrentMonth,
  getDayAll,
  getYearAndMonth,
} from "@/unit/tool";

export default {
  name: "index",
  components: {
    barChartSort,
    linechart,
  },
  data() {
    return {
      chartDataBarsort: {
        expectedData: [],
        data: [],
        color: "#2297F0",
      },
      chartDataBarsort2: {
        expectedData: [],
        data: [],
        color: "#F9C83F",
      },
      numList: [
        { name: "1-10", value: 1 },
        { name: "11-20", value: 2 },
        { name: "21-30", value: 3 },
        { name: "31-40",  value: 4, },
        { name: "21-30", value: 5 },
        { name: "41-50", value: 6 },
        { name: "51-60", value: 7 },
        { name: "61-70",  value: 8, },
        { name: "71-80", value: 9 },
        { name: "81-90", value: 10 },
      ],
      params: {
        startTime: 1,
        endTime: 10,
      },
      ArchiveNumpage: 1,
      page: 1,
      tabListNoTitle: [
        { key: "1", tab: "开机率" },
        { key: "3", tab: "故障时间" },
      ],
      noTitleKey: "1",
      chartData: {
        expectedData: [],
        date: [],
        lenged: "left",
        name: [],
      },
      chartstr: "%",
      iconLoading: false,
      jsonnumFields: { "公司名称": "name", "时间": "num" },
      jsonFieldsproduct:{ "公司名称": "name", "产量": "num" },
      str:"小时",
      runnumList:[],
      RunTimeRankList:[],
      OutPutRankList:[],
      runproList:[]
    };
  },
  created() {
    this.params.startTime = timeCalculation(new Date(), "subtract", 7);
    this.params.endTime = timeCalculation(new Date(), "subtract", 1);
    this.params.username = localStorage.getItem("userName");
    this.CompanyRunTimeRank();
    this.CompanyOutPutRank();
    this.CompanyOnlineRate();
    // this.CompanyAlarmRate();
  },
  methods: {
    numLISTsum(num){
        let list=[]
        for(var i=1;i<=num; i++){
          list.push({name:`${(10*(i-1))+1}-${(10*(i-1))+10}`,value:i})
        }
        return list
    },
    //运行时间排名
    CompanyRunTimeRank() {
      api.CompanyRunTimeRank(this.params).then((res) => {
        this.RunTimeRankList=res.Data;
        let num=Math.ceil( this.RunTimeRankList.length/10);
        this.runnumList= this.numLISTsum(num)
        let rows =this.RunTimeRankList.slice(0,10)
        this.formatRunTime(rows)
       
      });
    },
    formatRunTime(rows){
      let expectedData = [];
        let data = [];
        rows.forEach((item) => {
          for (var e in item) {
            expectedData.push((item[e]/60).toFixed(2));
            data.push(e);
          }
        });
        this.chartDataBarsort.expectedData = expectedData;
        this.chartDataBarsort.data = data;
    },


    //产量排名
    CompanyOutPutRank() {
      api.CompanyOutPutRank(this.params).then((res) => {
        this.OutPutRankList = res.Data;
        let num=Math.ceil( this.OutPutRankList.length/10);
        this.runproList= this.numLISTsum(num)
        let rows =this.OutPutRankList.slice(0,10)
        this.OutPutRank(rows)
        // this.rows为测试数据
       
      });
    },
    OutPutRank(rows){
        let expectedData = [];
        let data = [];
        rows.forEach((item) => {
          for (var e in item) {
            expectedData.push(item[e]);
            data.push(e);
          }
        });
        this.chartDataBarsort2.expectedData = expectedData;
        this.chartDataBarsort2.data = data;
    },
    //开机
    CompanyOnlineRate() {
      this.params.page = 1;
      this.params.pageSize = 5;
      api.CompanyOnlineRate(this.params).then((res) => {
        let rows = res.Data.rows;
        //data1为测试数据
        this.havelinedata(rows, 1);
      });
    },
    //故障
    CompanyAlarmRate() {
      this.params.page = 1;
      this.params.pageSize = 5;
      api.CompanyAlarmRate(this.params).then((res) => {
        let rows = res.Data.rows;
        //data1为测试数据
        this.havelinedata(rows);
      });
    },
    //折线图数据转换
    havelinedata(list, type) {
      let expectedData = [];
      let name = [];
      let dates = null;
      //下借口无数据，日期做渲染测试用，
      dates = getDayAll(this.params.startTime, this.params.endTime);
      list.forEach((item) => {
        let data = [];
        dates.forEach((items) => {
          let opt = null;
          let haveday = null;
          if (item.onlineRate || item.alarmRate) {
            let list = [];
            if (type == 1) {
              list = item.onlineRate;
            } else {
              list = item.alarmRate;
            }
            list.forEach((day) => {
              for (var e in day) {
                if (e == items) {
                  haveday = day[e];
                  return;
                }
              }
            });
          }

          if (haveday) {
            data.push((haveday * 100).toFixed(2));
          } else {
            data.push(0);
          }
        });
        expectedData.push(data);
        name.push(item.compName);
      });
      this.chartData.expectedData = expectedData;
      this.chartData.date = dates;
      this.chartData.name = name;
    },
    onTabChange(key, type) {
      this[type] = key;
      if (key == 1) {
        this.chartstr = "%";
        this.CompanyOnlineRate();
      } else {
        this.chartstr = "小时";
        this.CompanyAlarmRate();
      }
    },
    handleNumChange(value) {
      let val=value.split('-')
      let rows =this.OutPutRankList.slice(val[0]-1,val[1])
      this.OutPutRank(rows)
    },
    handleChange(value) {
      let val=value.split('-')
      let rows =this.RunTimeRankList.slice(val[0]-1,val[1])
      this.formatRunTime(rows)
    },

    // 获取需要导出的数据
    async getDownloadData() {
      let _this = this;
      if (_this.iconLoading == true) {
        return false;
      }
      _this.iconLoading = true;
      const res = await api.CompanyRunTimeRank({
        ..._this.params,
      });
      if (res.MsgCode !== 0) {
        return;
      }
      _this.iconLoading = false;
      let list = res.Data;
      let data=[]
      list.forEach((item) => {
        let opt={}
        for (var e in item) {
          opt.name = e;
          opt.num = item[e];
        }
        data.push(opt)
      });
      return data;
    },

   async getDownloadDataproduct() {
      let _this = this;
      if (_this.iconLoading == true) {
        return false;
      }
      _this.iconLoading = true;
      const res = await api.CompanyOutPutRank({
        ..._this.params,
      });
      if (res.MsgCode !== 0) {
        return;
      }
      _this.iconLoading = false;
      let list = res.Data;
      let data=[]
      list.forEach((item) => {
        let opt={}
        for (var e in item) {
          opt.name = e;
          opt.num = item[e];
        }
        data.push(opt)
      });
      return data;
    },
  },
};
</script>

<style scoped lang="less">
@import "index";
</style>
